<template>
	<view>
		<!-- 头部 -->
		<home-head :list="headSwiperList"></home-head>
		<!-- 自定义模块 -->
			<view class="template-box">
				<block v-for="(item, index) in homeTemplate" :key="item.id">
					<!-- 搜索 -->
					<sh-search v-if="item.type === 'search'"></sh-search>
					<!-- 推荐商品 -->
					<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'"
						:detail="item.content"></sh-hot-goods>
						
					<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name"
									:bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
				
				</block>
			</view>
	</view>
</template>

<script>
	// 导入需要的mixin文件
	import tabbar_badge from "@/mixins/tabbar-badge.js"
	import data1 from '@/data/home/index.js'
	import HomeHead from './index/home-head.vue'
	import shBanner from './components/sh-banner.vue';
	import shGridSwiper from './components/sh-grid-swiper.vue';
	import shHotGoods from './components/sh-hot-goods.vue';
	import shAdv from './components/sh-adv.vue';
	import shCoupon from './components/sh-coupon.vue';
	import shSeckill from './components/sh-seckill.vue';
	import shRichtext from './components/sh-richtext.vue';
	import shTitleCard from './components/sh-title-card.vue';
	import shSearch from './components/sh-search.vue';
	import shCategoryTabs from './components/sh-category-tabs.vue';
	export default {
		// 直接生效
		mixins: [tabbar_badge],
		name: "Home",
		components: {
			HomeHead,
			shBanner,
			shGridSwiper,
			shHotGoods,
			shAdv,
			shCoupon,
			shSeckill,
			shRichtext,
			shTitleCard,
			shSearch,
			shCategoryTabs,
		},
		data() {
			return {
				// 轮播图
				headSwiperList: [],
				homeTemplate: []
			}
		},
		 async onLoad() {
			this.headSwiperList = await data1.slidershows();
			this.homeTemplate = await data1.getHomeTemplate();
		},

		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 330rpx;
	}

	.swiper-item,
	image {
		width: 100%;
		height: 100%;
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		.nav-img {
			width: 128rpx;
			height: 140rpx;
		}
	}

	.floor-img-box {
		display: flex;
		padding-left: 10rpx;
	}

	.right-img-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.search-box {
		// 粘性定位
		position: sticky;
		top: 0;
		z-index: 999;
	}
</style>
